import React, { Component } from 'react';
import { connect } from 'dva';
import './train.less';
import { Table, Divider, Tag, Icon, Checkbox, Button, Input } from 'antd';
import 'antd/dist/antd.css';
import { _selectMe } from '@/api/infoapi';
import { _selectProjectList } from '@/api/train';
import { CheckboxChangeEvent } from '_antd@3.26.20@antd/lib/checkbox';
const { Search } = Input;
// interface Ilist {
//   id: string;
//   name: string;
//   parentId: string;
//   children: null;
// }
const columns = [
  {
    title: '项目名称',
    dataIndex: 'proname',
    key: 'proname',
    render: (
      text: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined,
    ) => <a>{text}</a>,
  },
  {
    title: '版本',
    dataIndex: 'version',
    key: 'version',
  },
  {
    title: '任务数量',
    dataIndex: 'taskCount',
    key: 'taskCount',
  },
  {
    title: '所属专业',
    dataIndex: 'trade',
    key: 'trade',
  },
  {
    title: '所属行业',
    dataIndex: 'major',
    key: 'major',
  },
  {
    title: '实训类型',
    dataIndex: '生产实训',
    key: 'createTime',
  },
  {
    title: '推荐完成天数',
    dataIndex: 'subjecttime',
    key: 'subjecttime',
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime',
  },
  {
    title: '演示',
    dataIndex: '查看',
    key: 'ch',
  },
  {
    title: '状态',
    key: 'status',
    render: (
      text: any,
      record: {
        name:
          | string
          | number
          | boolean
          | {}
          | React.ReactElement<any, string | React.JSXElementConstructor<any>>
          | React.ReactNodeArray
          | React.ReactPortal
          | null
          | undefined;
      },
    ) => <span>已发布</span>,
  },
  {
    title: '操作',
    key: 'stationId',
    render: () => (
      <span>
        <Icon type="eye" />
      </span>
    ),
  },
];

const mapStateToProps = (state: { app: any }, ownProps: any) => {
  return state.app;
};
@connect(mapStateToProps)
class Train extends Component {
  state = {
    states: ['全部', '草稿', '已发布', '待审核', '已驳回'],
    states1: ['全部', '生产实训', '教学实训', '专业群实训'],
    ind: 0,
    ind1: 0,
    ind2: 0,
    ind3: 0,
    sxtype: 0,
    status: 0,
    specialtyTag: "",
    industryTag: "I0001",
    proName: '',
    newProjectList: 0,
  };
  render() {
    let { selectStationLabel } = this.props;
    console.log(this.props, 'props');
    console.log(this.props.selectProjectList);

    let { ind, ind1, ind2, ind3, states1, states } = this.state;
    return (
      <div className="station_box">
        <div className="station_nav">
          <div className="station_nav_major">
            <div className="three">
              <p>实训类型：</p>
              <div>
                {states1 &&
                  states1.map((item, index) => {
                    return (
                      <span
                        key={index}
                        className={ind3 == index ? 'active' : ''}
                        onClick={() => {
                          this.getfilter3(index);
                        }}
                      >
                        {item}
                      </span>
                    );
                  })}
              </div>
            </div>
            <div className="one">
              <div className="major">专业:</div>
              <div>
                <span>全部</span>
                {selectStationLabel &&
                  selectStationLabel.map(
                    (
                      item: {
                        name:
                          | boolean
                          | React.ReactChild
                          | React.ReactFragment
                          | React.ReactPortal
                          | null
                          | undefined;
                      },
                      index: React.Key | null | undefined,
                    ) => {
                      return (
                        <span
                          key={index}
                          className={ind1 == index ? 'active1' : ''}
                          onClick={() => {
                            this.getfilter1(item.id, index);
                          }}
                        >
                          {item.name}
                        </span>
                      );
                    },
                  )}
              </div>
            </div>
            <div className="one">
              <div className="major">行业:</div>
              <div>
                <span>全部</span>
                {this.props.selectTradeList &&
                  this.props.selectTradeList.map(
                    (
                      item: {
                        name:
                          | boolean
                          | React.ReactChild
                          | React.ReactFragment
                          | React.ReactPortal
                          | null
                          | undefined;
                      },
                      index: React.Key | null | undefined,
                    ) => {
                      return (
                        <span
                          key={index}
                          className={ind2 == index ? 'active1' : ''}
                          onClick={() => {
                            this.getfilter2(item.value, index);
                          }}
                        >
                          {item.label}
                        </span>
                      );
                    },
                  )}
              </div>
            </div>
            <div className="two">
              <p>状态：</p>
              <div>
                {states &&
                  states.map((item, index) => {
                    return (
                      <span
                        key={index}
                        className={ind == index ? 'active' : ''}
                        onClick={() => {
                          this.getfilter(index);
                        }}
                      >
                        {item}
                      </span>
                    );
                  })}
              </div>
            </div>
          </div>
        </div>
        {/* 表格部分 */}
        <div className="station_main">
          <div className="tableHeader">
            <Button type="primary">+ 新增岗位</Button>
            <div>
              <Search
                placeholder="搜索岗位"
                onSearch={value1 => {
                  this.changeFilter(value1);
                }}
                style={{ width: 200 }}
                // value={this.state.value}
              />
            </div>
            <Checkbox
              onChange={e => {
                this.onChangetab(e);
              }}
            >
              仅看我的
            </Checkbox>
          </div>
          <Table columns={columns} rowKey="stationId" dataSource={this.props.selectProjectList} />
        </div>
      </div>
    );
  }
  componentDidMount() {
    this.props.dispatch({ type: 'app/selectStationLabel' });
    this.props.dispatch({ type: 'app/selectProjectList', action:{
      
        isAsc: 'desc',
        pageNum: 1,
        pageSize: 10,
        sxtype: 0,
        status: 0,
        proName: "",
        newProjectList: 0,
       
      
    }});
    this.props.dispatch({ type: 'app/selectTradeList' });
  }
  async changeFilter(value: CheckboxChangeEvent) {
    this.setState({
      proName:value
    })
    let res = await _selectProjectList({
      isAsc: 'desc',
      pageNum: 1,
      pageSize: 10,
      sxtype: this.state.sxtype,
      status: this.state.status,
      proName: value,
      newProjectList: this.state.newProjectList,
      specialtyTag: this.state.specialtyTag,
      industryTag: this.state.industryTag,
    });
    console.log(res.data.rows, '筛选');

    // this.setState({
    //   selectStationForm: res.data.rows,
    // });
    this.props.dispatch({ type: 'app/selectProjectList', action: res.data.rows });
  }

  //多选框  看我的
  async onChangetab(this: any, e: { target: { checked: any } }) {
    // console.log(`checked = ${e.target.checked}`,"仅看我的");
    this.setState({
      newProjectList: e.target.checked
    })
    let res = await _selectProjectList({
      isAsc: 'desc',
      pageNum: 1,
      pageSize: 10,
      sxtype: this.state.sxtype,
      status: this.state.status,
      proName: this.state.proName,
      newProjectList: e.target.checked*1,
      specialtyTag: this.state.specialtyTag,
      industryTag: this.state.industryTag,
    });
    console.log(res, '仅看我的');
    this.props.dispatch({ type: 'app/selectProjectList', action: res.data.rows });
    // if (e.target.checked) {
    //   // this.setState({
    //   //   selectStationForm: res.data.rows,
    //   // });

    // } else {
    //   this.setState({
    //     selectStationForm: this.props.selectStationForm,
    //   });
    // }
  }
  //点击状态
  async getfilter(ind: any) {
    console.log(ind);

    this.setState({
      ind,
      status: ind
    });
    let res = await _selectProjectList({
      isAsc: 'desc',
      pageNum: 1,
      pageSize: 10,
      sxtype: this.state.sxtype,
      status: ind,
      proName: this.state.proName,
      newProjectList: this.state.newProjectList,
      specialtyTag: this.state.specialtyTag,
      industryTag: this.state.industryTag,
    });
    console.log(res, '专业搜索');
    this.props.dispatch({ type: 'app/selectProjectList', action: res.data.rows });
    // if (ind) {
    //   // this.setState({
    //   //   selectStationForm: res.data.rows,
    //   // });

    // } else {
    //   this.setState({
    //     selectStationForm: this.props.selectStationForm,
    //   });
    // }
  }
  //专业
  async getfilter1(ind: any, index) {
    console.log(ind, index);

    this.setState({
      ind1: index,
      specialtyTag: ind
    });
    let res = await _selectProjectList({
      isAsc: 'desc',
      pageNum: 1,
      pageSize: 10,
      sxtype: this.state.sxtype,
      status: this.state.status,
      proName: this.state.proName,
      newProjectList: this.state.newProjectList,
      specialtyTag: ind,
      industryTag: this.state.industryTag,
    });
    console.log(res.data.rows, '点击搜索');
    if (ind) {
      // this.setState({
      //   selectStationForm: res.data.rows,
      // });
      this.props.dispatch({ type: 'app/selectProjectList', action: res.data.rows });
    } else {
      this.setState({
        selectTradeList: this.props.selectTradeList,
      });
    }
  }
  //行业
  async getfilter2(ind: any, index: React.Key | null | undefined) {
    console.log(ind, index);

    this.setState({
      ind2: index,
      industryTag: ind
    });
    let res = await _selectProjectList({
      isAsc: 'desc',
      pageNum: 1,
      pageSize: 10,
      sxtype: this.state.sxtype,
      status: this.state.status,
      proName: this.state.proName,
      newProjectList: this.state.newProjectList,
      specialtyTag: this.state.specialtyTag,
      industryTag: ind,
    });
    console.log(res, '培训');
    this.props.dispatch({ type: 'app/selectProjectList', action: res.data.rows });
  }
  //实训类型
  async getfilter3( index: React.Key | null | undefined) {
    console.log( index);

    this.setState({
      ind3: index,
      sxtype:index
    });
    let res = await _selectProjectList({
      isAsc: 'desc',
      pageNum: 1,
      pageSize: 10,
      sxtype: index,
      status: this.state.status,
      proName: this.state.proName,
      newProjectList: this.state.newProjectList,
      specialtyTag: this.state.specialtyTag,
      industryTag: this.state.industryTag,
    });
    console.log(res, '培训');
    this.props.dispatch({ type: 'app/selectProjectList', action: res.data.rows });
  }
}
export default Train;
